
<template>
  <section class="install">
      <span class="word">
      <section class="select" 
      :class="{active:isAllSelect}"
      @click="allShopSelect()"></section>
      全选          
      </span>      
      <section class="total">合计：<span class="total-price">￥{{getAllPrice}}</span></section>
      <section class="settle">结算 <span class="number">({{getAddCount}})</span></section>
  </section>
</template>
<script>

import {mapState,mapMutations,mapGetters} from "vuex";
export default {
  
  computed:{
      ...mapState(['isAllSelect']),
      ...mapGetters(['getAddCount','getAllPrice'])
    },
    methods:{
        ...mapMutations(['allShopSelect'])
    }
}
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.install{
    position: fixed;
    left: 0;
    right: 0;
    bottom: px2rem(98);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: px2rem(90);
    border-top: 1px solid #dddddf;
    background: #fff;
    .word{
        font-size: px2rem(28);
        color: #333333;
    }
    .select{
        display: inline-block;
        width: px2rem(32);
        height: px2rem(32);
        border: 1px solid #c8c8c8;
        margin-left: px2rem(30);
        border-radius: px2rem(16);
        &.active{
            background: $basic-color;
        }
    }
    .total{
        font-size: px2rem(28);
        color: #333333;
        &-price{
            color: #ec5a5a;
        }
    }
    .settle{
        width: px2rem(192);
        height: px2rem(92);
        background: $basic-color;
        text-align: center;
        line-height: px2rem(90);
        font-size: px2rem(28);
        color: #fff;
        span{
             font-size: px2rem(28);
             color: #fff;
        }
    }
}
</style>
